<template>
  <div class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <div class="formItem_header">{{ formData.type }}</div>
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="问题附件" class="double">
          <FileManageFull
            :file-names="formData.opinionFileNames"
            :file-real-names="formData.opinionFileRealNames"
            :file-urls="formData.opinionUrl"
            :row-index="1"
            :readonly="true"
            @fileName="setFileName2"
          />

        </el-form-item>
        <el-form-item label="问题描述" class="notice_main">
          <rich-text
            :disabled="editorParams.isDisabled"
            :editor-params="editorDescription"
          />
        </el-form-item>
        <el-form-item label="处理方式" prop="dictCode">
          <DictSelect
            :band-value.sync="formData.dictCode"
            dict-type="opinionHandleMethod"
          />
        </el-form-item>
        <el-form-item label="处理人">
          <el-input v-model="formData.handlePersonnel" disabled />
        </el-form-item>
        <el-form-item label="处理时间" prop="handleTime">
          <el-date-picker
            v-model="formData.handleTime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm"
            :default-value="formData.handleTime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="处理结果" prop="handleResult" class="notice_main">
          <rich-text
            ref="wangEditorRef"
            :disabled="editorParams.isDisabled"
            :editor-params="editorParams"
          />
        </el-form-item>
        <el-form-item label="附件" class="double">
          <FileManageFull
            :file-names="formData.responseFileNames"
            :file-real-names="formData.responseFileRealNames"
            :file-urls="formData.responseUrl"
            :row-index="1"
            @fileName="setFileName"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">提交处理</el-button>
    </div>
  </div>
</template>

<script>
import { getInfo, addOrUpdate } from '@/api/superManage/systemMonitoring/feedBack'
import moment from 'moment'
export default {
  name: 'ShowDetail',
  props: {
    layerid: {},
    id: {},
    showKey: {},
    showData: {}
  },
  data() {
    const opinionHandleMethod = (rule, value, callback) => {
      console.log(value)
      if (!value) {
        callback('处理结果不能为空')
      } else {
        callback()
      }
    }
    return {
      formData: {
        responseFileNames: '',
        responseFileRealNames: '',
        responseUrl: '',
        description: '',
        dictCode: '',
        handlePersonnel: '',
        handleTime: '',
        handleResult: '',
        opinionFileNames: '',
        opinionFileRealNames: '',
        opinionUrl: ''
      },
      companyId: undefined,
      editorDescription: {
        content: '', // 富文本内容
        placeholder: '请填写内容', // 富文本占位内容
        isDisabled: true // 富文本是否禁用
      },
      editorParams: {
        content: '', // 富文本内容
        placeholder: '请填写内容', // 富文本占位内容
        isDisabled: false // 富文本是否禁用
      },
      rules: {
        dictCode: [
          { required: true, message: '处理方式不能为空', trigger: 'change' }
        ],
        handleTime: [
          { required: true, message: '处理时间不能为空', trigger: 'change' }
        ],
        handleResult: [
          { required: true, validator: opinionHandleMethod, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    if (this.id) {
      this.getInfo()
    }
    this.formData.handlePersonnel = this.$store.state.user.loginUserName
  },
  mounted() {

  },
  methods: {

    setFileName(...data) {
      this.formData.responseFileNames = data[0]
      this.formData.responseFileRealNames = data[1]
      this.formData.responseUrl = data[2]
    },
    setFileName2(...data) {
      this.formData.opinionFileNames = data[0]
      this.formData.opinionFileRealNames = data[1]
      this.formData.opinionUrl = data[2]
    },
    getInfo() {
      getInfo(this.id).then(res => {
        this.formData = res.data
        this.companyId = res.data.companyId
        this.formData.handleTime = moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
        this.formData.handlePersonnel = this.$store.state.user.userName
        this.editorDescription.content = this.formData.description ? this.formData.description : ''
        this.editorParams.content = this.formData.handleResult ? this.formData.handleResult : ''
      })
    },
    onSubmit() {
      const wangEditorRef = this.$refs.wangEditorRef
      if (wangEditorRef != null) {
        var noticeContent1 = wangEditorRef.getEditorHtml()
        this.formData.handleResult = noticeContent1 == '<p><br></p>' ? '' : noticeContent1
      }
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.responseStatus = '1'
          addOrUpdate({ ...this.formData, companyId2: this.companyId }).then(res => {
            this.$message.success(res.msg)
            this.$layer.close(this.layerid)
            this.$parent.refresh()
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.notice_main{
  width: 100% !important;
  /deep/ .el-textarea__inner{
    height: 400px;
    width: 100%;
  }
}
.main_main{
  padding-top: 0 !important;
}
.border_bottom{
    border-bottom: 1px solid rgba(105,105,105,0.2);
    padding-bottom: 10px;
}
.space{
    /deep/ .el-form-item__label{
        color: #666 !important;
    }
}
.noData{
  color: #c0c4cc;
}
.showPicture{
  display: flex;
  .pictureCode_div{
  }
  .file_div{
    margin-left: 10px;
    // color: blue;
  }
}
/deep/ .el-form-item{
  .el-form-item__label{
    // color: #1F51B3;
    font-size: 15px;
  }
  .el-form-item__content{
    color: #333333;
    font-size: 15px;
  }
}
.el-table {
  font-size: 15px;
}
</style>
